<template>
    <div class="header-box" style="height: 80px;border-bottom: 1px solid #ccc;display: flex">
        <div class="box-left" style="width: 200px;">
            <img src="../assets/logo.png" alt="">
            <span style="font-weight: bold">管理系统</span>
        </div>
        <div class="box-middle" style="flex: 1;">

        </div>
        <div class="box-right" style="width: 200px;">

            <img v-if="!data.nickName.avatarUrl" src="../assets/logo.png" alt="">
            <img :src="data.nickName.avatarUrl" v-if="data.nickName.avatarUrl"   alt="">

            <el-dropdown>
                <span class="el-dropdown-link">

                  <span v-if="!data.nickName.nickName">路人甲</span>
                  <span v-if="data.nickName.nickName">{{data.nickName.nickName}}</span>

                  <el-icon class="el-icon--right">

                    <arrow-down/>

                  </el-icon>

                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/personInfo')">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import {useRouter} from 'vue-router';
    import {ref, reactive, onMounted,beforeMount,watch ,onBeforeMount,defineProps} from 'vue'
    const data = reactive(
        {
            nickName: {
                nickName: '',
                avatarUrl: ''
            },
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{}
        }
    )

    const router = useRouter();
    const logout = () => {
        localStorage.removeItem("user")
        sessionStorage.removeItem("user")
        router.push("/login")
        ElMessage({
            showClose: true,
            message: '已安全退出',
            type: 'success',
        })
    }

    const props = defineProps({
        zi_msg:{}

    })
    onMounted(() => {
        data.nickName.nickName = data.user.nickName
        data.nickName.avatarUrl = data.user.avatarUrl
        // console.log("onMounted-user==》",data.user)
    })
    onBeforeMount(() => {
        data.nickName.nickName = data.user.nickName
        data.nickName.avatarUrl = data.user.avatarUrl
    })

    watch(
        //() => [featureState.count,featureState.count2],
        () => props.zi_msg,
        (count, prevCount) => {
            data.nickName = count
        }
    );

</script>

<style scoped>
    .box-left {
        align-items: center;
        line-height: 80px;
        display: flex;
        justify-content: center;
    }

    .box-left img {
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border: 3px solid orange;
        border-radius: 50px;
    }

    .box-right {
        /*background-color: orange;*/
        align-items: center;
        line-height: 80px;
        display: flex;
        justify-content: center;
    }

    .box-right img {
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border: 3px solid orange;
        border-radius: 50px;
    }
</style>